<template>
  <div>
    <!--卡片菜单-->
    <el-row :gutter="10">
      <el-col :span="8">
        <!--搜索框-->
        <el-select
          v-model="valueSearch"
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="searchMethod"
          :loading="loading"
          @change="searchEvent"
          clearable
          @blur="searchBlur"
        >
          <el-option v-for="item in options" :key="item._id" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-col>
      <!--搜索按钮-->
      <el-col :span="1.5">
        <el-button icon="el-icon-search" @click="searchClick"></el-button>
      </el-col>
      <!--添加信息按钮-->
      <el-col :span="14">
        <el-button type="success" @click="dialogFormVisible = true" v-haspermission="'add'">添加信息</el-button>
      </el-col>
    </el-row>
    <!--选择班级选择器-->
    <el-row type="flex" justify="start">
      <el-col :span="6">
        <el-select
          v-model="selsetValue"
          placeholder="请选择"
          class="classSelect"
          @visible-change="selectEvent"
          filterable
        >
          <el-option label="全部" value="all"></el-option>
          <el-option v-for="(item,index) in classOptions" :value="item" :key="index"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <!--导出excel表格-->
    <div class="exportExcel">
      <el-button icon="iconfont icon-excel" @click="exportExcel">导出excel数据</el-button>
    </div>
    <!--表格-->
    <el-table :data="indexData" style="width: 100%" stripe border>
      <el-table-column prop="headimgurl" label="头像" width="130">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.headimgurl" fit="cover"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
        <template slot-scope="scope">
          <el-tag disable-transitions>{{scope.row.name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="class" label="班级" width="120">
        <template slot-scope="scope">
          <i class="el-icon-s-flag"></i>
          <span style="margin-left: 10px">{{ scope.row.class }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="degree" label="学历" width="120">
        <template slot-scope="scope">
          <i class="el-icon-s-order"></i>
          <span style="margin-left: 10px">{{ scope.row.degree }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="productUrl" label="项目地址" width="180">
        <template slot-scope="scope">
          <i class="el-icon-paperclip"></i>
          <el-link type="primary" style="margin-left: 10px">{{ scope.row.productUrl }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="Operation" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-star-on"
            size="mini"
            @click="$router.push('/studentManager/studentProfile')"
            v-haspermission="'read'"
          >查看</el-button>
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            @click="editStuInfo(scope.row)"
            v-haspermission="'edit'"
          >编辑</el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="delstuInfo(scope.row.sId)"
            v-haspermission="'delete'"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--表格分页功能-->
    <el-pagination
      hide-on-single-page
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="dataPage"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="dataCount"
      layout="total, sizes, prev, pager, next, jumper"
      :total="stuTotal"
    ></el-pagination>
    <!--添加学生信息的弹框-->
    <el-dialog title="学生项目添加" :visible.sync="dialogFormVisible">
      <el-form :model="stuProductform" :rules="stuInforules" ref="stuProductform ">
        <el-form-item label="头像" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://www.chst.vip/students/uploadStuAvatar"
            list-type="picture-card"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            name="headimgurl"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="班级" :label-width="formLabelWidth" prop="class">
          <el-input v-model="stuProductform.class" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名字" :label-width="formLabelWidth" prop="name">
          <el-input v-model="stuProductform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model="stuProductform.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="居住地" :label-width="formLabelWidth" prop="city">
          <el-input v-model="stuProductform.city" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学历" :label-width="formLabelWidth" prop="degree">
          <el-input v-model="stuProductform.degree" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目地址" :label-width="formLabelWidth" prop="productUrl">
          <el-input v-model="stuProductform.productUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="自我评价" :label-width="formLabelWidth" prop="description">
          <el-input v-model="stuProductform.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addstuInfo">确 定</el-button>
      </div>
    </el-dialog>
    <!--修改信息的弹框-->
    <el-dialog title="学生项目修改" :visible.sync="editdialogVisible">
      <el-form :model="editstuForm" :rules="stuInforules" ref="editstuForm ">
        <el-form-item label="班级" :label-width="formLabelWidth" prop="class">
          <el-input v-model="editstuForm.class" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名字" :label-width="formLabelWidth" prop="name">
          <el-input v-model="editstuForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model="editstuForm.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="居住地" :label-width="formLabelWidth" prop="city">
          <el-input v-model="editstuForm.city" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学历" :label-width="formLabelWidth" prop="degree">
          <el-input v-model="editstuForm.degree" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目地址" :label-width="formLabelWidth" prop="productUrl">
          <el-input v-model="editstuForm.productUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="自我评价" :label-width="formLabelWidth" prop="description">
          <el-input v-model="editstuForm.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" :label-width="formLabelWidth">
          <el-input v-model="editstuForm.avatarUrl" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editStuInfoDalay">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import qee from 'qf-export-excel'
export default {
  data () {
    return {
      // 上传的图片
      imageUrl: '',
      input1: '',
      // 选择器数据
      classOptions: [],
      selsetValue: '',
      // 首页表格数据
      indexData: [{}],
      // 发送获取首页表格数据发送的参数对象
      params: {
        page: 1,
        count: 5,
        class: ''
      },
      // 学生信息
      stuProductform: {
        class: '',
        name: '',
        age: '',
        city: '',
        degree: '',
        productUrl: '',
        description: '',
        headimgurl: ''
      },
      // 监测添加学生信息弹框的展示
      dialogFormVisible: false,
      formLabelWidth: '120px',
      // 监测添加学习信息的表单规则
      stuInforules: {
        class: [{ required: true, message: '请输入班级名称', trigger: 'blur' }],
        name: [{ required: true, message: '请输入学生姓名', trigger: 'blur' }],
        age: [{ required: true, message: '请输入学生年龄', trigger: 'blur' }],
        city: [{ required: true, message: '请输入学生城市', trigger: 'blur' }],
        degree: [
          { required: true, message: '请输入学生学历', trigger: 'blur' }
        ],
        productUrl: [
          { required: true, message: '请输入项目地址', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      },
      // 修改的对象
      editstuForm: {
        class: '',
        name: '',
        age: '',
        city: '',
        degree: '',
        productUrl: '',
        description: '',
        headimgurl: ''
      },
      // 控制修改模态框的显示和隐藏
      editdialogVisible: false,
      // 搜索框的数据
      options: [],
      valueSearch: '',
      loading: false,
      searchBlurText: '',
      // 选择器
      totallist: [],
      // 当前的页码
      stuTotal: 0,
      dataCount: 5,
      dataPage: 1
    }
  },
  created () {
    this.stulist()
  },
  methods: {
    // 获取学生项目信息
    async stulist (params) {
      params = this.params
      params.count = this.dataCount || ''
      params.page = this.dataPage || ''
      const { data: res } = await this.$http.get('/students/getstulist', {
        params
      })
      if (res.status == 1) {
        this.indexData = res.data
        this.stuTotal = res.total
        console.log(res)
      } else {
        this.$message.error('您没有获取到任何数据')
      }
    },
    // 添加学生项目信息
    async addstuInfo () {
      const { data: res } = await this.$http.post(
        'students/addstu',
        this.stuProductform
      )
      this.stulist(params)
      this.dialogFormVisible = false
    },
    // 删除学生信息方法
    delstuInfo (uId) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await this.$http.get('/students/delstu', {
            params: { sId: uId }
          })
          this.stulist()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 编辑学生信息方法
    editStuInfo (uIdd) {
      this.editdialogVisible = true
      this.editstuForm = uIdd
    },
    // 提交学生信息表单
    async editStuInfoDalay () {
      this.editdialogVisible = false
      const { data: res } = await this.$http.post(
        '/students/updatestu',
        this.editstuForm
      )
      if (res.status !== 200) {
        return this.$message({
          message: '编辑学生表单失效！',
          type: 'error'
        })
      }
      this.$message.success('编辑学生表单成功！')
    },
    // 图片上传成功的钩子触发的函数
    handleAvatarSuccess (res, file) {
      this.stuProductform.headimgurl = res.headimgurl
    },
    // 上传文件之前的钩子触发的函数
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 搜索框的选出下拉菜单
    searchMethod (query) {
      this.searchBlurText = query
      const key = this.searchBlurText
      const count = this.dataCount
      const page = this.dataPage
      const params = {
        key,
        count,
        page
      }
      if (query !== '') {
        this.loading = true
        setTimeout(async () => {
          this.loading = false
          const { data: res } = await this.$http.get('/students/searchstu', {
            params
          })
          this.options = res.data
          this.stuTotal = res.total
          this.indexData = res.data
        }, 200)
      } else {
        this.options = []
      }
    },
    // 搜索框触发表格数据更新
    async searchEvent () {
      const key = this.valueSearch
      const count = this.dataCount
      const page = this.dataPage
      const params = {
        key,
        count,
        page
      }
      const { data: res } = await this.$http.get('/students/searchstu', {
        params
      })
      this.indexData = res.data
      this.stuTotal = res.total
    },
    // 搜索框失去焦点
    searchBlur () {
      this.valueSearch = this.searchBlurText
    },
    // 搜索图标点击事件
    async searchClick () {
      const key = this.valueSearch
      const count = this.dataCount
      const page = this.dataPage
      const params = {
        key,
        count,
        page
      }
      const { data: res } = await this.$http.get('/students/searchstu', {
        params
      })
      this.indexData = res.data
      this.stuTotal = res.total
    },
    // 班级选择框
    async selectEvent () {
      const { data: res } = await this.$http.get('/students/getclasses')
      this.classOptions = res.data
      if (this.selsetValue) {
        const ressult2 = this.totallist.find((item) => {
          return item.class == this.selsetValue
        })
        this.indexData = [ressult2]
      } else {
        this.totallist = this.indexData
      }
      if (this.selsetValue == 'all') {
        this.indexData = this.totallist
      }
    },
    // 导出表格
    exportExcel () {
      const titleList = [
        {
          title: '头像',
          key: 'headimgurl'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '班级',
          key: 'class'
        },
        {
          title: '学历',
          key: 'degree'
        },
        {
          title: '项目地址',
          key: 'productUrl'
        }
      ]
      const dataSource = this.indexData
      qee(titleList, dataSource, '项目信息表')
    },
    // 分页 每页显示的条数
    handleSizeChange (val) {
      this.params.count = val
      this.stulist(this.params)
    },
    // 分页 点击当前页
    handleCurrentChange (val) {
      this.dataPage = val
      console.log(this.searchBlurText)
      if (this.searchBlurText) {
        this.searchClick()
        return
      }
      this.stulist(this.params)
    }
  }
}
</script>

<style lang="less" scoped>
.el-row {
  text-align: left;
}
.el-select {
  width: 100%;
}
.classSelect {
  margin: 20px 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.exportExcel {
  text-align: right;
  margin-bottom: 15px;
}
.el-pagination {
  margin-top: 20px;
}
</style>
